<html>
<head>
    
        <script src="/static/js/jquery-2.1.1.min.js"></script>
        <!-- 
        <script src="/static/js/angular.min-1.3.2.js"></script>
        -->
        <script src="/static/js/angular.js"></script>
        <script src="/static/js/bootstrap.min.js"></script> 
        <script src="/static/js/semantic.min.js"></script>
        <script src="/static/js/angular-semantic-ui.js"></script>

        <script src="/static/js/chosen.jquery.min.js"></script>
        <!-- 
        -->
        


        <script src="/static/js/socket.io.min.js"></script>
        <script src="/static/js/underscore-min-1.5.2.js"></script>
        <script src="/static/js/ui-bootstrap-tpls-0.11.2.min.js"></script>
        <!-- 
        -->
        <!-- 
        <script src="/static/js/jquery-1.10.2.min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script src="/static/js/markdown.min.js"></script>
        <script src="/static/js/marked.js"></script>
        -->
        

        <script src="/static/js/angular-route.min.js"></script>
        <script src="/static/js/angular-cookies.min.js"></script>
        <script src="/static/js/angular-sanitize.min.js"></script>
        <script src="/static/js/angular-resource.min.js"></script>
        <script src="/static/js/angular-animate.min.js"></script>

        <script src="/static/js/hr/utils.js"></script>
        <script src="/static/js/hr/myDirectives.js"></script>

        <script src="/static/js/hr/myDirectives.js"></script>
        <script src="/static/js/hr/app.js"></script>
        <script src="/static/js/hr/docCtrl.js"></script>
        <script src="/static/js/hr/templateCtrl.js"></script>
        <script src="/static/js/hr/mainCtrl.js"></script>
        <script src="/static/js/hr/userCtrl.js"></script>
        <script src="/static/js/hr/adminCtrl.js"></script>
        <script src="/static/js/hr/blogCtrl.js"></script>
        <!-- 
         -->

        <link rel="stylesheet" href="/static/css/bootstrap.min.css"    />
        <link rel="stylesheet" href="/static/css/bootstrap-theme.css"  />
        <link rel="stylesheet" href="/static/css/animate.css"          />
<!-- 
        <link rel="stylesheet" href="/static/css/lato.css"    />
-->
        <link rel="stylesheet" href="/static/css/semantic.min.css"    />
        <link rel="stylesheet" href="/static/css/custom.css"           />
        <link rel="stylesheet" href="/static/css/chosen.min.css"    />

    <title>Test header</title>
</head>

<body id="example" class="pushabl" ng-app="mainApp">

<div class="ui left demo vertical inverted labeled icon sidebar menu">
      <a class="item">
    <i class="home icon"></i>
    Home
      </a>
      <a class="item">
    <i class="block layout icon"></i>
    Topics
      </a>
      <a class="item">
    <i class="smile icon"></i>
    Friends
      </a>
      <a class="item">
    <i class="calendar icon"></i>
    History
      </a>
      <a class="item">
    <i class="mail icon"></i>
    Messages
      </a>
      <a class="item">
    <i class="chat icon"></i>
    Discussions
      </a>
      <a class="item">
    <i class="trophy icon"></i>
    Achievements
      </a>
      <a class="item">
    <i class="shop icon"></i>
    Store
      </a>
      <a class="item">
    <i class="settings icon"></i>
    Settings
      </a>
</div>  
<div class="ui inverted menu bar grid fixed">

    <!-- 
                    <div class="ui logo shape">
                        <img class="ui image" src="/static/img/logo.png" alt="" />
                    </div>
                -->
    <div class="ui floated inverted menu"> 
        <a class="brand item"><i>IBM Cloud Asstessment</i></a>
        <a class="view ui item" id="menu-opener"  href="">
            <i class="sidebar icon"></i>
            Menu
        </a>

        <a class="item" href="#/main">Main</a>
        <a class="item" href="">Actions</a>
        <a class="ui dropdown item" sem-dropdown on="hover"> <i class="dropdown icon"></i>Dropdown  
            <div class="menu ui transition hidden">
                <div class="item">Action</div>
                <div class="item">Another action</div>
                <div class="item">Something else here</div>
                <div class="ui divider"></div>
                <div class="item">Seperated link</div>
                <div class="item">One more seperated link</div>
                <!-- nested menu item -->
                <div class="ui item dropdown">Sub menu<i class="dropdown icon"></i>
                    <div class="menu ui transition hidden">
                        <div class="item">Sub Action</div>
                        <div class="item">Sub Another action</div>
                        <div class="item">Sub Something else here</div>
                        <div class="ui divider"></div>
                        <div class="item">Sub Seperated link</div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="ui right floated inverted menu ">
        <a class="item" href="">Login <i class="world icon"></i></a>
    </div>


</div>

<div class="pusher" ng-controller="userCtrl">


    <div class="ui page grid">
        <div class="row">
            <div class="column">
                <h2>dropdown</h2>
                <div sem-dropdown2> </div>
                
    <h1>Hii</h1>
    <dropdown title="my dropdown"  ng-model="dropdown_model" open="false">
    <dropdown-group title="title1">item1</dropdown-group>
    <dropdown-group title="title2">item2</dropdown-group>
    <dropdown-group title="title3">item3</dropdown-group>
    <dropdown-group title="title4">item4</dropdown-group>
    </dropdown>
    
    <button class="ui button " ng-click='addItem()'>Toggle select single</button>
    <a class="ui button " ng-click="notify()">attt </a>

    <select ng-options='item.name for item in items track by item.id' ng-model='chosenItems' multiple rows='3' style="width:100%" 
        
        chosen='items'  >
        
    </select>
    
    <p ng-repeat='item in chosenItems'>[[item.name]]</p>


            </div>



            
        </div>
        <div class="row">
        <div class="column" >
            <h1 class="header large">Main Column</h1>
            <div class="ui divider"></div>

            <div class="ui one column grid">
                <div class="aligned center column">
                    <h1>First column</h1>

                    <div id="tabs" class="ui segment">
                        <div class="ui top attached tabular menu">
                            <a class="item active" data-tab="first">First</a>
                            <a class="item" data-tab="second">second</a>
                        </div>
                        <div class="ui bottom attached tab segment active" data-tab="first">
                            <button class="ui button" id="menu-opener">Menu</button>
                            first content
                        </div>
                        <div class="ui bottom attached tab segment" data-tab="second">
                            second content
                        </div>
                    </div>
                </div>
                <div class="column">
                    <h1>Second column</h1>
                </div>
            </div>


        </div>
        </div>
    </div>
    
    <div class="ui padded one column grid" style="background:#eee"><div class="row">

            <div class="column">
                <h1 >Angular based tabs</h1>
                <sem-tabs type='buttons' is-root='true' >
                    <sem-tab title="long title for first">
                    <h1>First and only title in this tab</h1>
                    <div class="ui divider"> </div>
                    <pre>This is a paragraph....
what about this text, multiline text could be adjusted easiely
    tabbed text as well
                    </pre>
                    </sem-tab>
                    <sem-tab title="Sem second">
                        <sem-tabs>
                            <sem-tab title="Introduction">
                            <h3>Cloud assessment tool description</h3>
                            
                            </sem-tab>
                            <sem-tab title="long title for first"> sub 1 </sem-tab>
                            <sem-tab title="long title for first"> sub 1 </sem-tab>
                            <sem-tab title="second sub tab">
                            <table class="ui celled striped table" width="100%">
                                <thead>
                                    <th>
                                        <td>Col1</td>
                                        <td>Col2</td>
                                        <td>Col3</td>
                                        <td>Col4</td>
                                    </th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Data1</td>
                                        <td>Data2</td>
                                        <td>Data3</td>
                                        <td>Data4</td>
                                    </tr>
                                </tbody>
                                
                                
                            </table>
                            
                            
                            
                            </sem-tab>
                        </sem-tabs>
                    
                    </sem-tab>
                </sem-tabs>
            </div>
            
    </div>

</div>

<div class="ui page grid" style='background:#111;color:gray;'>

    <div class='row'>
            <div class="ui four wide column" >
                <h3>four </h3>
            </div>
            <div class="ten wide center aligned  column " >
                <h3>ten </h3>
            </div>
            <div class="two wide right aligned  column " >
                <h4>two </h4>
            </div>

</div>
</div>


</div>


    <script style="display:none">
    <!--
    $(document).ready(function(){
        /*
        $('.right.menu.open').on("hover",function(e){
            e.preventDefault();
            $('.ui.vertical.menu').toggle();
        });
        */
        
        //$('.ui.dropdown').dropdown({on:'hover'});
        $('#tabs .menu .item').tab({history: false, context:$('#tabs')});
        $('#menu-opener').on('click', function(){
            $('.left.demo.sidebar')
            .not('.styled')
            .sidebar('setting', {
                dimPage: false,
                transition: 'push',
                mobileTransition: 'overlay',
            });
            $('.left.demo.sidebar').not('.styled').sidebar('toggle');
        });


    });

    //-->
</script>
</body>

</html>
